<template>
  <div class="p-16px">
    <el-card>
      <el-space :size="24">
        <div>账户余额：1233元</div>
        <div>冻结金额：1233元</div>
        <div>可提金额：1233元</div>
        <el-button type="primary">我要提现</el-button>
      </el-space>
    </el-card>
    <el-card class="mt-16px">
      <el-space wrap :size="16">
        <div class="flex items-center whitespace-nowrap">
          提现方名称：
          <el-input
            placeholder="请输入内容"
            v-model="params.receiver"
            clearable
          ></el-input>
        </div>
        <div class="flex items-center whitespace-nowrap">
          提现时间：
          <el-date-picker
            v-model="params.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
        <el-button type="primary">搜索</el-button>
      </el-space>
    </el-card>
    <el-card class="mt-16px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="编号" width="80" />
        <el-table-column prop="receiver" label="提现方名称" min-width="180" />
        <el-table-column prop="time" label="提现时间" min-width="180" />
        <el-table-column prop="price" label="提现金额" min-width="180" />
        <el-table-column prop="status" label="提现状态" min-width="180" />
      </el-table>
      <div class="mt-16px flex justify-end">
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          layout="prev, pager, next"
          background
          :total="total"
        />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const params = ref({
  receiver: "",
  time: [],
});
const tableData = ref([
  {
    receiver: "张三",
    time: "2024-01-01 10:00:00",
    price: "100",
    status: "成功",
  },
]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
</script>

<style lang="scss" scoped></style>
